<template>
	<view class="order-details">
		<NavBar title="订单详情" />
		<view class="map">
			<Map :lat="lat" :lon="lon" :markers="marker" v-if="orderInfo.rider_status!=4"/>
		</view>
		<view class="content">
			<view class="nav-box">
				<view class="top">
					<view class="title">
						<view class="time" v-if="orderInfo.rider_status!=4"> 预计<text>19:20内</text>送达 </view>
						<view class="time" v-else> 订单已送达 </view>
						<view class="price"> ￥ <text>{{orderInfo.delivery_money}}</text> </view>
					</view>
				</view>
				<view class="address-info">
					<view class="distance">
						<view class="km">
							<view class="km-item"> {{shopDistance}} </view>
							<view class="km-item"> km </view>
						</view>
						<view class="m">
							<view class="m-item"> {{userDistance}} </view>
							<view class="m-item"> km </view>
						</view>
					</view>
					<view class="shop-user-nav">
						<view class="shop-info">
							<view class="shop-name"> {{orderInfo.shop_arr.name}} </view>
							<view class="address"> {{orderInfo.shop_arr.detail_address}} </view>
						</view>
						<view class="user-info">
							<view class="user-name"> {{orderInfo.address}} </view>
							<view class="address"> {{orderInfo.address}} </view>
						</view>
					</view>
					<view class="nav">
						<image src="/static/icon/mine/nav.png" class="n-img"/>
						<text> 导航 </text>
					</view>
				</view>
			</view>
			<!-- 用户信息  接单后才会显示 -->
			<view class="user-info">
				<view class="user">
					<image :src="orderInfo.member.avatar" class="avatar" />
					<view class="nav">
						<view class="user-name"> {{orderInfo.member.name}} {{orderInfo.addressee_telphone}} </view>
						<view class="address"> {{orderInfo.address}} </view>
					</view>
				</view>
				<view class="review">
					<view class="num">
						<view> 退货次数：{{orderInfo.member.order_refund_num}}次</view>
						<BFB :bfb="orderInfo.member.order_refund_ratio"/>
					</view>
					<view class="btn" @tap="goEva"> 个人评价 </view>
				</view>
			</view>
			<!-- 商品清单 -->
			<view class="goods-list">
				<view class="goods-list-title"> 商品清单 </view>
				<GoodsItem :goodsInfo="item" v-for="item in orderInfo.item" :key="item"/>
			</view>
			<!-- 配送信息  接单后才会显示 -->
			<view class="rider-info" v-if="orderInfo.rider_status != 0">
				<view class="rider-info-title"> 配送信息 </view>
				<view class="rider-item">
					<view class="label"> 配送员 </view>
					<view class="value"> {{orderInfo.rider_member.name}} </view>
				</view>
				<view class="rider-item" v-if="orderInfo.accept_time">
					<view class="label"> 接单时间 </view>
					<view class="value"> {{orderInfo.accept_time}} </view>
				</view>
				<view class="rider-item" v-if="orderInfo.shop_time">
					<view class="label"> 到店时间 </view>
					<view class="value"> {{orderInfo.shop_time}} </view>
				</view>
				<view class="rider-item" v-if="orderInfo.take_time">
					<view class="label"> 取货时间 </view>
					<view class="value"> {{orderInfo.take_time}} </view>
				</view>
				<view class="rider-item" v-if="orderInfo.sent_time">
					<view class="label"> 送达时间 </view>
					<view class="value"> {{orderInfo.sent_time}} </view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="order-info-title"> 订单信息 </view>
				<view class="order-item">
					<view class="label"> 订单编号 </view>
					<view class="value">
						<view class="text"> {{orderInfo.order_sn}} </view>
						<image src="/static/icon/order/copy.png" class="copy" @tap="copy(orderInfo.order_sn)" />
					</view>
				</view>
				<view class="order-item">
					<view class="label"> 下单时间 </view>
					<view class="value"> {{orderInfo.create_time}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 支付时间 </view>
					<view class="value"> {{orderInfo.pay_time}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 支付方式 </view>
					<view class="value"> {{orderInfo.pay_type}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.pick_time">
					<view class="label"> 预约送货时间 </view>
					<view class="value"> {{orderInfo.pick_time}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 商品金额 </view>
					<view class="value price"> ￥{{orderInfo.goods_amount}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 配送费 </view>
					<view class="value price"> ￥{{orderInfo.delivery_money}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 实付金额 </view>
					<view class="value price"> ￥{{orderInfo.receive_amount}} </view>
				</view>
				<view class="order-item intro">
					<view class="label"> 备注 </view>
					<view class="value"> {{orderInfo.note?orderInfo.note: '暂无备注信息'}} </view>
				</view>
			</view>
			<!-- btn -->
		</view>
			<view class="btn-box">
				<!-- 未接单 -->
				<view class="box" v-if="orderInfo.rider_status==0">
					<view class="is-h" v-if="orderInfo.is_h==1">
						<view class="reject" @tap="turnOrder(orderInfo.id)"> 拒绝({{orderInfo.shengyue}}) </view>
						<view class="resolve" @tap="rushOrder(orderInfo.id)"> 收到 </view>
					</view>
					<view class="btn" @tap="rushOrder(orderInfo.id)" v-else> 立即抢单 </view>
				</view>
				<!-- 已接单 -->
				<view class="contact" v-else>
					<view class="con-item">
						<image src="/static/icon/rider/contact_user.png" class="c-img"/>
						<text> 联系顾客 </text>
					</view>
					<view class="con-item" @tap="call(orderInfo.addressee_telphone)">
						<image src="/static/icon/rider/contact_user_phone.png" class="c-img"/>
						<text> 联系顾客 </text>
					</view>
					<view class="con-item">
						<image src="/static/icon/rider/contact_shop.png" class="c-img"/>
						<text> 联系商家 </text>
					</view>
					<view class="con-item" @tap="call(orderInfo.shop_arr.help_mobile)">
						<image src="/static/icon/rider/contact_shop-phone.png" class="c-img"/>
						<text> 联系商家 </text>
					</view>
					<view class="suc" v-if="orderInfo.rider_status==1" @tap="isShop(orderInfo.id)"> 我已到店 </view>
					<view class="suc" v-if="orderInfo.rider_status==2" @tap="isTake(orderInfo.id)"> 我已取货 </view>
					<view class="suc" v-if="orderInfo.rider_status==3" @tap="isSend(orderInfo.id)"> 我已送达 </view>
					<view class="suc" v-if="orderInfo.rider_status==4" > 订单已完成 </view>
				</view>
			</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import BFB from '@/components/BFB.vue';
	import Map from '@/components/Map.vue';
	import GoodsItem from '@/components/OneGoodsItem.vue'
	import { useAddressStore } from '@/store/index.js'
	import { GetOrderDetailsApi, RushOrderApi, TurnDownOrderApi, SendShopApi, TakeShopApi, SendMemberApi } from '@/service/rider.js'
	const marker = ref([
		{
			id: 1,
			latitude: 39.916397,
			longitude: 116.41025,
			iconPath: "/static/icon/components/location.png",
			width: 20,
			height: 20,
			number: 0,
			customCallout: {
				anchorY: 0, // Y轴偏移量
				anchorX: 0, // X轴偏移量
				display: "ALWAYS" // 一直展示
			}
		}
	])
	const orderId = ref()
	const orderInfo = ref({
		id: '',
		order_sn: '',
		address: '',
		addressee_telphone: '',
		delivery_money: '',
		create_time: '', // 下单时间
		pay_time: '', // 支付时间
		pay_type: '', // 支付方式
		pick_time: '', // 预约送货时间
		res_distance: '', // 用户距离
		accept_time: "", //接单时间
		shop_time: "", //到店时间
		take_time: "", //取货时间
		sent_time: "", //送达时间
		rider_status: '', //0=未接单 1=接单成功 2=已到店 3=已取货 4=已送达
		is_h: '', //==1需要展示拒绝和收到  ==0展示抢单
		shengyue: '', //拒绝倒计时
		goods_amount: '', // 商品金额
		receive_amount: '', // 实付金额
		note: '', // 备注
		member: {
			order_refund_ratio: '', //退货率
			order_refund_num: '', //退货次数
			avatar: '',
			name: ''
		},
		shop_arr: {
			detail_address: '',
			distance: '', //当前位置距离商家距离(米)
			help_mobile: '',
			name: '',
			latitude: '',
			longitude: ''
		},
		rider_member: {
			avatar: '',
			name: ''
		}
	})
	const lat = ref() // 当前经纬度
	const lon = ref() // 当前经纬度
	const shopDistance = computed(() => {
		return (orderInfo.value.shop_arr.distance/1000).toFixed(1)
	})
	const userDistance = computed(() => {
		return (orderInfo.value.res_distance/1000).toFixed(1)
	})
	const copy = (info) => {
		uni.setClipboardData({
			data: info,
			success:() => getApp().globalData.toast('复制成功')
		});
	}
	const call = (phone) => {
		uni.makePhoneCall({ phoneNumber: phone })
	}
	// 拒绝
	const turnOrder = (id) => {
		TurnDownOrderApi({id}).then(res => {
			getApp().globalData.toast('拒绝成功')
			uni.navigateBack()
		})
	}
	// 收到/抢单
	const rushOrder = (id) => {
		RushOrderApi({id}).then(res => {
			orderInfo.value.rider_status = 1
			getApp().globalData.toast('抢单成功')
		})
	}
	// 我已到店
	const isShop = (id) => {
		SendShopApi({id}).then(res => {
			orderInfo.value.rider_status = 2
			getApp().globalData.toast('操作成功')
		})
	}
	// 我已取货
	const isTake = (id) => {
		TakeShopApi({id}).then(res => {
			orderInfo.value.rider_status = 3
			getApp().globalData.toast('操作成功')
		})
	}
	// 我已送达
	const isSend = (id) => {
		SendMemberApi({id}).then(res => {
			orderInfo.value.rider_status = 4
			getApp().globalData.toast('操作成功')
		})
	}
	const getOrderDetails = (id) => {
		const { lonlat } = useAddressStore()
		const params = {
			id,
			latitude: lonlat.latitude,
			longitude: lonlat.longitude,
		}
		GetOrderDetailsApi(params).then(res => {
			orderInfo.value = res
			marker.value = [{
				id: 1,
				latitude: Number(res.address_latitude),
				longitude: Number(res.address_longitude),
				iconPath: "/static/icon/components/location.png",
				width: 20,
				height: 20,
				number: 0,
				customCallout: {
					anchorY: 0, // Y轴偏移量
					anchorX: 0, // X轴偏移量
					display: "ALWAYS" // 一直展示
				}
			}]
		})
	}
  const goEva = () => {
    uni.navigateTo({
      url: `/pages/shopPages/orderManage/viewUserEva/viewUserEva?member_id=${orderInfo.value.member_id}`
    })
  }
	onLoad((e) => {
		orderId.value = e.id
	})
	onReady(() => {
		console.log('read');
		const { lonlat, SETLONLAT } = useAddressStore()
		SETLONLAT()
		lat.value = lonlat.latitude
		lon.value = lonlat.longitude
		getOrderDetails(orderId.value)
	})
</script>

<style lang="scss" scoped>
	.order-details {
		.map {
			min-height: 40px;
		}
		.content {
			padding: 0 12px;
			padding-bottom: 40px;
			transform: translateY(-30px);
			box-sizing: border-box;
			.nav-box {
				padding: 10px 12px;
				border-radius: 10px;
				background-color: #FFFFFF;
				.top {
					padding-bottom: 10px;
					border-bottom: 1px solid #eeeeee;
					.title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.time {
							color: #222222;
							font-size: 18px;
							font-weight: 700;
							line-height: 20px;
							text {
								color: #FF9F00;
							}
						}
						.price {
							color: #333333;
							font-size: 12px;
							font-weight: 700;
							line-height: 17px;
							text {
								font-size: 18px;
							}
						}
					}
				}
				.address-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10px 0;
					.distance {
						text-align: center;
						.km, .m {
							.km-item, .m-item {
								color: #FF3B1E;
								font-size: 12px;
								font-weight: 400;
								line-height: 12px;
							}
						}
						.m {
							position: relative;
							margin-top: 36px;
							&::before {
								position: absolute;
								top: -30px;
								left: 50%;
								display: block;
								content: '';
								width: 1px;
								height: 24px;
								background-color: #d8d8d8;
							}
						}
					}
					.shop-user-nav {
						flex: 1;
						margin: 0 14px;
						.shop-info, .user-info {
							.shop-name, .user-name {
								color: #222222;
								font-size: 16px;
								font-weight: 500;
								line-height: 20px;
							}
							.address {
								color: #999999;
								font-size: 14px;
								margin-top: 4px;
								font-weight: 400;
								line-height: 20px;
							}
						}
						.user-info {
							margin-top: 14px;
							padding: 0;
						}
					}
					.nav {
						display: flex;
						flex-direction: column;
						align-items: center;
						.n-img {
							width: 34px;
							height: 34px;
						}
						text {
							color: #999999;
							font-size: 12px;
							margin-top: 3px;
							font-weight: 400;
							line-height: 20px;
						}
					}
				}
			}
			.user-info {
				margin-top: 10px;
				border-radius: 10px;
				padding: 16px 10px 10px;
				background-color: #FFFFFF;
				.user {
					display: flex;
					align-items: center;
					.avatar {
						width: 54px;
						height: 54px;
						margin-right: 10px;
						border-radius: 50%;
					}
					.nav {
						flex: 1;
						.user-name {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							line-height: 17px;
							margin-bottom: 5px;
						}
						.address {
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							line-height: 21px;
						}
					}
				}
				.review {
					display: flex;
					margin-top: 10px;
					align-items: center;
					justify-content: space-between;
					.num {
						color: #666666;
						font-size: 12px;
						font-weight: 400;
						line-height: 22px;
						display: flex;
						align-items: center;
					}
					.btn {
						width: 60px;
						height: 22px;
						color: #FF3B1E;
						font-size: 12px;
						font-weight: 400;
						line-height: 22px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 98px;
						border: 1px solid #FF3B1E;
					}
				}
			}
			.goods-list {
				padding: 16px 12px 10px;
				border-radius: 10px;
				background-color: #FFFFFF;
				margin: 10px 0;
				.goods-list-title {
					margin-bottom: 17px;
				}
			}
			.rider-info {
				border-radius: 10px;
				margin-bottom: 10px;
				padding: 16px 12px 10px;
				background-color: #FFFFFF;
				.rider-info-title {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					line-height: 19px;
					margin-bottom: 16px;
				}
				.rider-item {
					display: flex;
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					align-items: center;
					margin-bottom: 13px;
					justify-content: space-between;
					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}
					.value {
						color: #333333;
					}
				}
			}
			.order-info {
				padding: 16px 12px 10px;
				border-radius: 10px;
				background-color: #FFFFFF;
				.order-info-title {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					line-height: 19px;
					margin-bottom: 16px;
				}
				.order-item {
					display: flex;
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 19px;
					align-items: center;
					margin-bottom: 13px;
					justify-content: space-between;
					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}
					.value {
						color: #333333;
						display: flex;
						.copy {
							width: 16px;
							height: 16px;
							margin-left: 3px;
						}
					}
					.price {
						color: #FF3B1E;
					}
				}
				.intro {
					justify-content: start;
					align-items: start;
					flex-direction: column;
					.value {
						color: #333333;
						margin-top: 8px;
						font-size: 14px;
						font-weight: 400;
						line-height: 20px;
					}
				}
			}
			
		}
		.btn-box {
			padding: 10px 20px;
			position: fixed;
			background-color: #F4F5F7;
			border-top: 1px solid #e6e6e6;
			bottom: 0;
			left: 0;
			right: 0;
			.box {
				.is-h {
					display: flex;
					.reject, .resolve {
						flex: 1;
						height: 40px;
						line-height: 40px;
						text-align: center;
						border-radius: 106px;
						border: 1px solid #333;
						box-sizing: border-box;
					}
					.resolve {
						color: #FFFFFF;
						background: #FF3B1E;
						border: none;
						margin-left: 20px;
					}
				}
				.btn {
					height: 40px;
					color: #FFFFFF;
					line-height: 40px;
					text-align: center;
					background: #FF3B1E;
					border-radius: 106px;
				}
			}
			.contact {
				display: flex;
				.con-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 10px;
					.c-img {
						width: 22px;
						height: 22px;
						margin-bottom: 4px;
					}
					text {
						color: #666666;
						font-size: 11px;
						font-weight: 400;
						line-height: 13px;
					}
				}
				.suc {
					margin-left: 5px;
					flex: 1;
					height: 40px;
					color: #FFFFFF;
					line-height: 40px;
					text-align: center;
					background: #FF3B1E;
					border-radius: 106px;
				}
			}
		}
	}
	:deep(.amap-logo) {
	  opacity: 0 !important;
	}
	:deep(.amap-copyright) {
	  opacity: 0 !important;
	}
</style>